<template>
    <div>
        <el-alert title="最新示例：Git\front\frame\vuePrjHtgl"
                  type="warning"
                  :closable="false"
                  show-icon>
        </el-alert>

        <el-divider content-position="left">按钮</el-divider>
        <div class="panel _body">
            <el-button>默认按钮</el-button>
            <el-button plain
                       type="danger">删除等危险操作（点击后需要 showAlert）</el-button>
            <el-button icon="el-icon-circle-plus-outline"
                       type="success">新增</el-button>
            <el-button icon="el-icon-search"
                       type="primary">搜索</el-button>
            <el-button icon="el-icon-refresh-right">重置</el-button>
            <el-button icon="el-icon-edit-outline"
                       type="warning">导出</el-button>
            <el-button class="_primary">重要操作</el-button>
            <el-button>默认按钮</el-button>
            <!-- 已展开显示 up，已收起显示 down -->
            <!-- 文字和 i 标签之间不空格 -->
            <el-dropdown class="com-button"
                         trigger="click"
                         placement="bottom-start"
                         @visible-change="fVisibleChange">
                <el-button>
                    下拉按钮<i class="el-icon--right"
                       :class="bOpened?'el-icon-arrow-up':'el-icon-arrow-down'"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="0">操作0</el-dropdown-item>
                    <el-dropdown-item command="1">操作1</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>

        <el-divider content-position="left">实时搜索框（不由按钮点击触发），常用于前端数据过滤</el-divider>
        <div class="panel _body">
            <el-input placeholder="请输入关键字"
                      prefix-icon="el-icon-search">
            </el-input>
        </div>

        <el-divider content-position="left">日期范围布局：</el-divider>
        <div class="panel _body">
            <div class="com-datebar">
                <el-date-picker></el-date-picker>
                <span class="com-datebar-span">至</span>
                <el-date-picker></el-date-picker>
            </div>
        </div>

        <el-divider content-position="left">弹框</el-divider>
        <div class="panel _body">
            <el-button @click="fBtnClick('dialog')">点我查看弹框</el-button>
            <wiv-dialog :visible.sync="bDialogVisible"
                        width="90%"
                        height="90%"
                        title="弹框标题">
                <!--slot:default-->
                <sub-dialog :data="oDialogData" />
            </wiv-dialog>
        </div>
    </div>
</template>

<script>
    import SubDialog from './class/dialog.vue';//弹框

    export default {
        //**** el, name
        //**** components, directives
        components: {
            SubDialog,
        },
        //**** extends, mixins, provide/inject
        //**** props, data, computed
        data() {
            return {
                //-- 下拉按钮 --
                bOpened: false,//下拉框是否显示
                //-- 弹框 --
                bDialogVisible: false,//弹框显示
                oDialogData: { name: 'xingming' },//弹框传值
            };
        },
        //**** watch
        //**** 生命周期钩子：mounted, updated, beforeDestroy 等
        mounted() {
        },
        beforeDestroy() {
        },
        //**** methods
        methods: {
            //*** 开放给父子组件的接口方法
            //*** 事件响应函数
            //下拉按钮
            fVisibleChange(bOpened) {
                this.bOpened = bOpened;
            },
            //按钮点击事件
            fBtnClick(sType) {
                switch (sType) {
                    case 'dialog':
                        this.bDialogVisible = true;
                        break;
                }
            },
            //*** 其他
        }
        //**** template, render
    }
</script>